<template>
  <div class="info-dialog">
    <el-dialog :visible.sync="visible" :title="title" :modal-append-to-body="true" :append-to-body="true"
      :destroy-on-close="false" :close-on-click-modal="false" :modal="true" top="10vh" width="500px" @closed="closed">
      <el-form ref="fromDatas" :model="fromData" :rules="rules" style="padding: 20px;">
        <el-form-item label-width="100px" label="上级" prop="parentId">
          <!-- <el-cascader :options="options" v-model="fromData.parentId" emitPath="true" :props="{ expandTrigger: 'hover',
      value: 'id',
      label: 'label',
      children: 'children',
      checkStrictly: true}" @change="handleChange" clearable></el-cascader> -->
          <el-select v-model="fromData.parentId" placeholder="请选择" clearable>
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="名称" prop="name">
          <el-input v-model="fromData.name" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="100px" label="类型" prop="type">
          <el-select v-model="fromData.type" placeholder="请选择">
            <el-option v-if="type=='EDITOR'" label="目录" value="EDITOR-M"></el-option>
            <el-option v-if="type=='EDITOR'" label="接口" value="EDITOR"></el-option>
            <el-option v-if="type=='DOC'" label="目录" value="DOC-M"></el-option>
            <el-option v-if="type=='DOC'" label="文档" value="DOC"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="标识" prop="code">
          <el-input v-model="fromData.code" placeholder="请输入标识" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="版本号" prop="version">
          <el-input-number v-model="fromData.version" :min="0" :max="1000" label="请输入版本号" />
        </el-form-item>

        <el-form-item label-width="100px" label="序号" prop="sort">
          <el-input-number v-model="fromData.sort" :min="0" :max="1000" label="请输入序号" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveAPI,
    loadFolders
  } from '@/api/cloud/docApi'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'InfoDialog',
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      dialogData: {
        type: Object,
        default: () => ({})
      },
      handleType: {
        type: String,
        default: ''
      },
      parentId: {
        type: String,
        default: ''
      },
      grandParentId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        type: '',
        visible: false,
        title: '',
        buttonLoading: false,
        fromData: {
          id: '',
          parentId: '',
          name: '',
          code: '',
          type: '',
          version: 1.0,
          sort: 1
        },
        rules: {
          name: [{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 100,
              message: '长度在 2 到 100 个字符',
              trigger: 'blur'
            }
          ]
        },
        options: []
      }
    },
    computed: {},
    created() {
      this.loadFolders()
    },
    watch: {
      dialogVisible: {
        handler: function(value) {
          this.visible = value
        },
        immediate: true,
        deep: false
      },
      dialogData: {
        handler: function(nValue) {
          if (nValue) {
            this.fromData.id = nValue.id || ''
            this.fromData.parentId = nValue.parentId || ''
            this.fromData.name = nValue.name || ''
            this.fromData.code = nValue.code || ''
            this.fromData.type = nValue.type || ''
            this.fromData.version = nValue.version || 1.0
            this.fromData.sort = nValue.sort || 1
          }
        },
        immediate: true,
        deep: false
      },
      handleType: {
        handler: function(nValue) {
          if (nValue == '1') {
            this.title = '编辑（'+nValue+'）'
            this.type = this.fromData.type.replace('-M','')
          } else {
            this.title = '新增（'+nValue+'）'
            this.type = nValue;
            this.fromData.type = nValue+"-M";
          }
        },
        immediate: true,
        deep: false
      },
      parentId: {
        handler: function(nValue) {
          if (nValue) {
            this.fromData.parentId = nValue
          }
        },
        immediate: true,
        deep: false
      }
    },
    methods: {
      loadFolders: function() {
        loadFolders({type:this.type}).then(rsp => {
          if (isOk(rsp)) {
            this.options = rsp.result
          }
        })
      },
      handleChange: function(v) {
        if (v.length == 1) {
          this.fromData.parentId=v[0]
          this.fromData.type = 'C'
        } else if (v.length == 2) {
          this.fromData.type = 'F'
          this.fromData.parentId=v[1]
        } else {
          this.fromData.type = 'M'
          this.fromData.parentId='0'
        }
      },
      submitForm: function() {
        this.$refs.fromDatas.validate((valid) => {
          if (valid) {
            this.buttonLoading = true
            saveAPI(this.fromData).then(rsp => {
              // console.log(rsp);
              if (isOk(rsp)) {
                if (this.type === 'M' || this.type === 'C') {
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  })
                }
                if (this.type === '1') {
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  })
                }
                this.buttonLoading = false
                this.closed()
                if (this.fromData.parentId === '0') {
                  this.$emit('refreshAll')
                } else {
                  this.$emit('refresh', this.fromData.parentId, this.grandParentId)
                }
              }
            })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-select,
  .el-cascader,
  .el-input-number {
    width: 100% !important;
  }
</style>
